<script setup lang="ts">
import {
  getCurrentInstance,
  onBeforeUnmount,
  onMounted,
  provide,
  ref,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { ArrowLeft } from '@vben/icons';

import { Card } from 'ant-design-vue';

import { getKnowledgeDocument } from '#/api/ai/knowledge/document';

import ProcessStep from './ProcessStep.vue';
import SplitStep from './SplitStep.vue';
import UploadStep from './UploadStep.vue';

const route = useRoute(); // 路由
const router = useRouter(); // 路由

// 组件引用
const uploadDocumentRef = ref();
const documentSegmentRef = ref();
const processCompleteRef = ref();
const currentStep = ref(0); // 步骤控制
const steps = [
  { title: '上传文档' },
  { title: '文档分段' },
  { title: '处理并完成' },
];
const formData = ref({
  knowledgeId: undefined, // 知识库编号
  id: undefined, // 编辑的文档编号(documentId)
  segmentMaxTokens: 500, // 分段最大 token 数
  list: [] as Array<{
    count?: number; // 段落数量
    id: number; // 文档编号
    name: string; // 文档名称
    process?: number; // 处理进度
    segments: Array<{
      content?: string;
      contentLength?: number;
      tokens?: number;
    }>;
    url: string; // 文档 URL
  }>, // 用于存储上传的文件列表
}); // 表单数据

provide('parent', getCurrentInstance()); // 提供 parent 给子组件使用

const tabs = useTabs();

/** 返回列表页 */
function handleBack() {
  // 关闭当前页签
  tabs.closeCurrentTab();
  // 跳转到列表页，使用路径， 目前后端的路由 name： 'name'+ menuId
  router.push({
    path: `/ai/knowledge/document`,
    query: {
      knowledgeId: route.query.knowledgeId,
    },
  });
}

/** 初始化数据 */
async function initData() {
  if (route.query.knowledgeId) {
    formData.value.knowledgeId = route.query.knowledgeId as any;
  }
  // 【修改场景】从路由参数中获取文档 ID
  const documentId = route.query.id;
  if (documentId) {
    // 获取文档信息
    formData.value.id = documentId as any;
    const document = await getKnowledgeDocument(documentId as any);
    formData.value.segmentMaxTokens = document.segmentMaxTokens;
    formData.value.list = [
      {
        id: document.id,
        name: document.name,
        url: document.url,
        segments: [],
      },
    ];
    // 进入下一步
    goToNextStep();
  }
}
/** 切换到下一步 */
function goToNextStep() {
  if (currentStep.value < steps.length - 1) {
    currentStep.value++;
  }
}

/** 切换到上一步 */
function goToPrevStep() {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
}

/** 初始化 */
onMounted(async () => {
  await initData();
});

/** 添加组件卸载前的清理代码 */
onBeforeUnmount(() => {
  // 清理所有的引用
  uploadDocumentRef.value = null;
  documentSegmentRef.value = null;
  processCompleteRef.value = null;
});
/** 暴露方法给子组件使用 */
defineExpose({
  goToNextStep,
  goToPrevStep,
  handleBack,
});
</script>

<template>
  <Page auto-content-height>
    <div class="mx-auto">
      <!-- 头部导航栏 -->
      <div
        class="bg-card absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b px-4"
      >
        <!-- 左侧标题 -->
        <div class="flex w-48 items-center overflow-hidden">
          <ArrowLeft
            class="size-5 flex-shrink-0 cursor-pointer"
            @click="handleBack"
          />
          <span class="ml-2.5 truncate text-base">
            {{ formData.id ? '编辑知识库文档' : '创建知识库文档' }}
          </span>
        </div>

        <!-- 步骤条 -->
        <div class="flex h-full flex-1 items-center justify-center">
          <div class="flex h-full w-96 items-center justify-between">
            <div
              v-for="(step, index) in steps"
              :key="index"
              class="relative mx-4 flex h-full cursor-pointer items-center"
              :class="[
                currentStep === index
                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
                  : 'text-gray-500',
              ]"
            >
              <div
                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
                :class="[
                  currentStep === index
                    ? 'border-blue-500 bg-blue-500 text-white'
                    : 'border-gray-300 bg-white text-gray-500',
                ]"
              >
                {{ index + 1 }}
              </div>
              <span class="whitespace-nowrap text-base font-bold">{{
                step.title
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体内容 -->
      <Card :body-style="{ padding: '10px' }" class="mb-4">
        <div class="mt-12">
          <!-- 第一步：上传文档 -->
          <div v-if="currentStep === 0" class="mx-auto w-[560px]">
            <UploadStep v-model="formData" ref="uploadDocumentRef" />
          </div>
          <!-- 第二步：文档分段 -->
          <div v-if="currentStep === 1" class="mx-auto w-[560px]">
            <SplitStep v-model="formData" ref="documentSegmentRef" />
          </div>

          <!-- 第三步：处理并完成 -->
          <div v-if="currentStep === 2" class="mx-auto w-[560px]">
            <ProcessStep v-model="formData" ref="processCompleteRef" />
          </div>
        </div>
      </Card>
    </div>
  </Page>
</template>
